import { LitElement, html } from "lit";

//因为模板只是变量，你可以在函数中传递它们。
//根据一定的条件，可以对模板进行包装。

//一个常见的用例是当呈现一个菜单选项列表时，其中一些
//选项是链接，而其他选项是按钮。基本模板可能是一样的，
//但是它们需要用其他语义元素来包装。
function wrapItemTemplate(item, template) {
    switch (item.type) {
        case "button":
            return html`
        <button>${template}</button>
      `;
        case "link":
            return html`
        <a href="${item.url}">${template}</a>
      `;
        default:
            return template;
    }
}

// Create the custom template for each item
function getItemTemplate(item) {
    // Create a base template, the same for each item
    const baseTemplate = html`
    <div>${item.message}</div>
  `;

    // Call and return the value of the wrapper factory functions
    return wrapItemTemplate(item, baseTemplate);
}

class TemplateWrapping extends LitElement {
    static get properties() {
        return {
            items: { type: Array }
        };
    }

    constructor() {
        super();

        this.items = [
            { type: "button", message: "hello" },
            { type: "link", url: "#", message: "world" },
            { type: "none", message: "foo" }
        ];
    }

    render() {
        return html`
      <!-- Map each items to it's own template -->
      ${this.items.map(getItemTemplate)}
    `;
    }
}

customElements.define("template-wrapping", TemplateWrapping);
